<template>
  <router-view />
</template>

<style lang="scss">
@media screen {
  @media (min-width: 1200px) {
    .chat-box {
      width: 1000px;
    }
    .menu-icon__item {
      font-size: 32px;
    }
    .friends {
      &-avatar {
        @include setWidHei(45px, 45px);
      }
      &-name {
        width: 65%;
      }
    }
  }
  @media (min-width: 1100px) and (max-width: 1200px) {
    .chat-box {
      width: 970px;
    }
    .menu-icon__item {
      font-size: 30px;
    }
    .friends {
      &-avatar {
        @include setWidHei(45px, 45px);
      }
      &-name {
        width: 62%;
      }
    }
  }
  @media (min-width: 1000px) and (max-width: 1100px) {
    .chat-box {
      width: 940px;
    }
    .menu-icon__item {
      font-size: 28px;
    }
    .friends {
      &-avatar {
        @include setWidHei(42px, 42px);
      }
      &-name {
        width: 59%;
      }
    }
  }
  @media (min-width: 900px) and (max-width: 1000px) {
    .chat-box {
      width: 910px;
    }
    .menu-icon__item {
      font-size: 28px;
    }
    .friends {
      &-avatar {
        @include setWidHei(40px, 40px);
      }
      &-name {
        width: 56%;
      }
    }
  }
  @media (max-width: 900px) {
    .chat-box {
      width: 880px;
    }
    .menu-icon__item {
      font-size: 28px;
    }
    .friends {
      &-avatar {
        @include setWidHei(38px, 38px);
      }
      &-name {
        width: 52%;
      }
    }
  }
  @media (max-width: 700px) {
    .chat-box {
      left: 0 !important;
      transform: translate3d(0, -50%, 0) !important;
    }
  }
}
</style>
